
<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml" scroll="no">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
<!--Basic Styles-->
<link href="${ctx }framework/css/font.css" rel="stylesheet" />
<link href="${ctx }framework/miniui/themes/material/miniui.css"
	rel="stylesheet" />
<link href="${ctx }framework/css/app.min.1.css" rel="stylesheet"
	type="text/css" />
<link href="${ctx }framework/css/app.min.2.css" rel="stylesheet"
	type="text/css" />
<script src="${ctx }framework/main.js" type="text/javascript"></script>
<script src="${ctx }eao/static/echarts.min.js"></script>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
<script>

	function doSearch() {
       var dc = {
			StartTime :  mini.get("startTime").getFormValue(),
			EndTime : mini.get("endTime").getFormValue(),
			CompanyInfo : mini.get("tb").getFormValue()
		};
		mini.get('dg1').load(dc);
		/* -----------饼状图-------------- */
		var count = [], fullName = [],lineCount = [],AddTime = [];
		Server.sendRequest("visit.findSubAccountVisitV", dc,
				function(response) {
					if (response._STATUS == 1) {
						for (var i = 0; i < response.countId.length; i++) {
							var data = {};
							data.name = "";
							data.value = 0;
							fullName.push(response.countId[i].FullName + "");
							data.name = response.countId[i].FullName;
							data.value = response.countId[i].count;
							count.push(data);
						}
						for (var i = 0; i < response.AddTime.length; i++) {
							lineCount.push(response.AddTime[i].count);
							AddTime.push(response.AddTime[i].date);
						}

						//饼状图
						var myChart = echarts.init(document.getElementById("pieChart"));
						var option = {
							title : {
								text : '每个机构下二级账户的数量统计',
								subtext : ' ',
								x : 'center'
							},
							tooltip : {
								trigger : 'item',
								formatter : "{a} <br/>{b} : {c} ({d}%)"
							},
							legend : {
								orient : 'vertical',
								left : 'left',
								data : fullName
							},
							series : [ {
								name : '每个机构下二级账户的数量统计',
								type : 'pie',
								radius : '50%',
								center : [ '50%', '60%' ],
								data : count,
								itemStyle : {
									emphasis : {
										shadowBlur : 10,
										shadowOffsetX : 0,
										shadowColor : 'rgba(0, 0, 0, 0.5)'
									}
								}
							} ]
						};
						myChart.setOption(option);
						/* ------------柱状图------------- */
						var histogramMyChart = echarts.init(document.getElementById("histogram"));
						var histogramOption = {
							title : {
								text : '二级账户统计',
								x : 'center'
							},
							color : [ '#3398DB' ],
							tooltip : {
								trigger : 'axis',
								axisPointer : { // 坐标轴指示器，坐标轴触发有效
									type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
								}
							},
							grid : {
								left : '3%',
								right : '4%',
								bottom : '3%',
								containLabel : true
							},
							xAxis : [ {
								type : 'category',
								data : AddTime,
								axisTick : {
									alignWithLabel : true
								}
							} ],
							yAxis : [ {
								type : 'value'
							} ],
							series : [ {
								name : '二级账户统计',
								type : 'bar',
								barWidth : '60%',
								data : lineCount
							} ]
						};
						histogramMyChart.setOption(histogramOption);
						/* -----------------折线图------------------ */
						var lineMyChart = echarts.init(document
								.getElementById("lineChart"));
						var lineOption = {
							tooltip : {
								trigger : 'axis',
								axisPointer : {
									type : 'cross',
									label : {
										backgroundColor : '#6a7985'
									}
								}
							},
							legend : {
								data : [ '二级账户数量统计' ]
							},
							toolbox : {
								feature : {
									saveAsImage : {}
								}
							},
							grid : {
								left : '3%',
								right : '4%',
								bottom : '3%',
								containLabel : true
							},
							xAxis : [ {
								type : 'category',
								boundaryGap : false,
								data : AddTime
							} ],
							yAxis : [ {
								ype : 'value'
							} ],
							series : [ {
								name : '二级账户数量统计',
								type : 'line',
								stack : '总量',
								data : lineCount
							} ]
						};
						lineMyChart.setOption(lineOption);
					} else {
						top.mini.warn(response.Message);
					}

				});

	}
	document.onkeydown = function(event) {
		event = getEvent(event);
		if (event.keyCode == 13) {
			var ele = event.srcElement || event.target;
			if (ele.id == 'SearchName' || ele.id == 'Submitbutton') {
				doSearch();
			}
		}
	};

	var newQueryString = null;

	function onRowSelect(e) {
		newQueryString = "ID=" + e.row.ID;
		mini.get('mainTabs').tryReload(newQueryString);
	}

	function onTabsActiveChanged(e) {
		e.sender.tryReload(newQueryString, e.sender.getTab(e.index));
	}

	Page.onLoad(function() {
		doSearch();
		mini.get('dg1').reload();
	});
	 function onCloseClick(e) {
         var obj = e.sender;
         obj.setText("");
         obj.setValue("");
     }
	 function company(){
			mini.open({
				width:800,
				height:600,
				title:'请选择一级机构账号',
				url:'${ctx}eao/dataanalyze/companyInfoList.jhtml',
				onOk : function(){
					var form = $DW.mini.getForm('form2');
					var dc = form.getData();
					console.log(dc.notCompany);
					var obj = mini.get("tb");
			         	obj.setValue(dc.CompanyMobile);
					if(dc.notCompany=="true"){
						obj.setValue("非体系内账号");
					}
			        $D.close();
					}
			});
		}
	function clearText(){
		var obj = mini.get("tb");
        obj.setValue("");
	}
</script>
</head>
<body class="body-list" style="background: #F9F9F9;">
	<div id="layout1" class="mini-layout"
		style="width: 100%; height: 100%;">
		<div title="north" region="north" showheader="false">
			<div class="mini-toolbar">
				<div class="pull-left">
					<span style="padding-left: 20px"> 从
					<input class="mini-datepicker" maxDate="Script=new Date()" id="startTime" name="StartDate" valueType="string" allowinput="false"
						format="yyyy-MM-dd" />&nbsp; 至
						<input class="mini-datepicker" maxDate="Script=new Date()" id="endTime" name="EndDate" valueType="string" allowinput="false" format="yyyy-MM-dd" />
					</span>
					<input id="tb" class="mini-textbox" emptyText="请选择一级机构" readonly="readonly"/>
					<input type="button" value="清空" onclick="clearText()"/>
					<a class="mini-button" iconCls="icon-user" href="javascript:company();" style="margin-left: 30px;">选择一级机构账号</a>
					<button
						class="btn btn-default waves-effect waves-button waves-float"
						onClick="doSearch()">
						<i class="iconfont icon-search"></i>
					</button>
				</div>
			</div>
		</div>
		<div region="west" width="800" showheader="false">
			<div class="mini-fit">
				<div id="dg1" class="mini-datagrid z-depth-1"
					style="width: 100%; height: 100%;"
					method="visit.findSubAccountVisit" idField="ID" multiSelect="true">
					<div property="columns">
						<div type="indexcolumn"></div>
						<div field=CompanyMobile width="50">一级机构账号</div>
						<div field=employeeNumber width="50">一级机构名称</div>
						<div field="Mobile" width="50">人员账号</div>
						<div field="RealName" width="50">人员姓名</div>
						<div field="Position" width="50">人员职位</div>
						<div field="AddTime" width="50" dateFormat="yyyy-MM-dd HH:mm:ss"
							 headerAlign="center">创建时间</div>
					</div>
				</div>
			</div>
		</div>
		<div region="center">
			<div id="mainTabs" class="mini-tabs"
				style="width: 100%; height: 100%;" plain="false"
				onbeforeactivechanged="onTabsActiveChanged">
				<div title="饼状图" iconCls="icon-article">
					<div class="echarts" id="pieChart"
						style="height: 500px; width: 100%; margin: 0 auto;"
						method="visit.findSubAccountVisitV"></div>
				</div>
				<div title="柱状图" iconCls="icon-menu">
					<div class="echarts" id="histogram"
						style="height: 500px; width: 500px; margin: 0 auto;"
						method="visit.findSubAccountVisitV"></div>
				</div>
				<div title="折线图" iconCls="icon-database">
					<div class="echarts" id="lineChart"
						style="height: 500px; width: 500px; margin: 0 auto;"
						method="visit.findSubAccountVisitV"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

<!-- Generated by Wisc cost:10ms ip:123.14.77.14 -->